<template>
  <div class="mybox">
    <el-menu background-color="#334053" :router='true' text-color="#fff" active-text-color="#409EFF" :default-active="$route.path"
      style="height: 100vh">
      <template v-for="(item,index) in menuList">
        <template v-if="item.children&&index!=0">
          <el-submenu :index="index+''" :key="item.icon">
            <template slot="title">
              <span><i :class="item.icon"></i>{{item.menuName}}</span>
            </template>
            <el-menu-item @click.native="addTab(data)" v-for="(data,ind) in item.children" :key="data.icon"
              v-show="data.isNav" :index="data.path"><i :class="data.icon"></i>{{data.menuName}}</el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item v-show="item.isNav" @click.native="addTab(item)" :index="item.path" :key="item.index"><span><i
                :class="item.icon"></i>{{item.menuName}}</span></el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "Aside",
    data() {
      return {}
    },
    methods: {
      addTab(data) {
        this.$store.commit("setTabs", {
          title: data.menuName,
          name: data.path
        })
      }
    },
    computed: {
      menuList() {
        return this.$store.state.menu.menuList
      }
    }
  }
</script>

<style scoped>
  .mybox {
    height: 100vh;
  }

  .mybox>>>.el-submenu .el-menu .el-menu-item {
    padding: 0;
  }

  /*  /deep/ .el-submenu__title:hover,.el-menu-item:focus, .el-menu-item:hover{
    background-color: #ecf5ff;
  } */
</style>
